/*
 * @Description: 标题栏组件
 * @Author: buwei.huang
 * @Date: 2019-06-19 18:07:11
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-07-02 14:08:21
 */
<template>
  <title-bar
    :needBack="false"
    :needBorder="false"
    class="head_titlebar baseBgColorNoActive"
  >
    <!-- 左侧按钮 -->
    <div
      class="head_titlebar_left"
      slot="left"
      v-if="isTitleLeftButton"
      @click="goToPage('btn')"
    >
      <i class="icon fontsize44 iconfont icon-notice">
        <span v-if="message > 0"></span>
      </i>
    </div>
    <!-- 搜索框内容 -->
    <div
      class="center flex-h flex-vc"
      :class="!isTitleLeftButton ? 'leftPadding' : ''"
    >
      <div
        class="search_warp flex-h flex-vc"
        @click="goToPage('search')"
      >
        <i class="search_icon fontsize34 iconfont icon-search" />
        <span class="search_placehold">搜索公交线路、车站</span>
      </div>
    </div>
    <!-- 右侧按钮 -->
    <div
      slot="right"
      @click="scanQRCode"
    >
      <i class="icon fontsize44 iconfont icon-scancode" />
    </div>
  </title-bar>
</template>
<script>
import { TitleBar } from 'vue-xb-ui-depot'
import { goToPage, detectionGoToPage } from '@/utils/JumpUtils.js'
import { getMessage } from '../api/api.js'
export default {
  components: {
    'title-bar': TitleBar
  },
  data() {
    return {
      isTitleLeftButton: window.isTitleLeftButton,
      message: 0
    }
  },
  mounted() {
    this.addEvent()
    this.getMessage()
    // 监听下拉刷新
    this.$EventBus.$on('onRefresh', () => {
      this.getMessage()
    })
  },
  methods: {
    goToPage(state) {
      if (state === 'btn') {
        let btnUrl = 'city-app/notice.html?_rv=true&_tv=true&_abs=true&_bbv=true&_im=true'
        detectionGoToPage(btnUrl)
      } else {
        let searchUrl = 'bus-app/SearchCar.html?_tv=false&_rv=false&_abs=true&_bbv=true&_im=true'
        goToPage(searchUrl)
      }
    },
    // 获取消息数量
    getMessage() {
      getMessage().then(res => {
        console.log('getMessage2222222~~~~~~~')
        this.message = res
      })
    },
    scanQRCode() {
      // 扫一扫
      this.$BarcodeScanner.then(BarcodeScanner => {
        BarcodeScanner.scanQRCode(
          () => {
            alert('success')
          },
          () => {
            alert('error')
          }
        )
      })
    },
    // 添加监听
    addEvent() {
      document.addEventListener(
        'resume',
        () => {
          // 登录状态更改时收到resume事件，自动刷新
          this.getMessage()
        },
        false
      )
    }
  }
}
</script>
<style>
.head_titlebar_left .icon {
  position: relative;
}
.head_titlebar_left .icon > span {
  position: absolute;
  right: 34px;
  top: 2px;
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 50%;
}
.head_titlebar .icon {
  padding: 0 30px;
  color: #fff;
}
.head_titlebar .search_icon {
  color: rgb(255, 255, 255, 0.5);
  padding: 0 10px 0 30px;
}
.head_titlebar .search_placehold {
  color: rgb(255, 255, 255, 0.5);
  font-size: 14px; /* no */
}
.head_titlebar .center {
  width: 540px;
}
.head_titlebar .search_warp {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgb(255, 255, 255, 0.1);
  border-radius: 8px;
}
.head_titlebar .leftPadding {
  padding-left: 30px;
  width: 615px;
}
</style>
